<!DOCTYPE html>
<html lang="en">
<head>
    <title>注册</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>
        //在页面加载完成后
        $(function () {
            function isPhoneNo(phone) {
                var pattern = /^1[34578]\d{9}$/;
                return pattern.test(phone);
            }
            //给username绑定blur事件
            $("#phone").blur(function () {
                //获取username文本输入框的值
                let phone = $(this).val();
                let span = $("#s_phone");

                if (!isPhoneNo(phone)){
                    $("#s_check").css("color", "red");
                    $("#s_check").html("请输入正确的手机号")
                }else {
                    $("#s_check").css("color", "green");
                    $("#s_check").html("手机号正确")
                }
                //发送ajax请求
                $.ajax({
                    url: "/tester/findByPhone",
                    data: {"phone": phone},
                    dataType: "JSON",
                    type:"POST",
                    //返回的数据dataJSON格式
                    success: function (data) {
                        if (data.code==0) {
                            //用户名存在
                            span.css("color", "red");
                            span.html("用户已存在");
                        } else {
                            //用户名不存在
                            span.css("color", "green");
                            span.html("用户不存在");
                        }
                    }
                });
            });

            $("#sub").click(function () {
                //发送ajax请求
                var jd = {
                   username: $("#username").val(),
                    phone: $("#phone").val()
                };
                let username = $("#username").val();
                let phone = $("#phone").val();
                let check = $("#s_phone").text();

                if (username!=''&&phone!=''&&check=='用户不存在'&&isPhoneNo(phone)){
                    $.ajax({
                        url: "tester/insert",
                        data:JSON.stringify(jd),
                        dataType: "JSON",
                        type:"post",
                        //返回的数据dataJSON格式
                        contentType: 'application/json;charset=UTF-8',
                        success: function (data) {
                            //具体操作
                            if (data.code==0) {
                                window.location.href="ProblemTest"
                            }else{
                                alert("报错")
                            }
                        }
                    });
                }

            })
        })
    </script>
    <style>
        html{
            height: 100%;
        }
        #form{
            width: 400px;
            height: 500px;
            margin: 0px auto;
            background-color: rgb(204, 199, 209);
            border-radius: 10px ;
            padding: 20px;
            margin-top: 100px;
        }
        #welcome{
            color: rgb(8, 8, 8);
            font-size: 30px;
            font-weight: bold;
            text-align: left;
        }
        #table1{
            margin-left: 60px;
        }
        tr{
            height: 50px;
        }
        #sub{

            border-radius: 20px;
        }
        body{
            width: 100%;
            height: 100%;
            background-image: url("/image/c.png");
            background-repeat: no-repeat;
            background-size: 100% 100% ;
        }
    </style>
</head>
<body>
<h1>初始登录页面，已摒弃,version-1.0</h1>
<form role="form" id="form">
    <table id="table1">
        <tr>
            <td colspan="3"><div id="welcome">性格测试问卷</div></td>
        </tr>
        <tr>
            <td>姓名</td>
            <td colspan="2"><input type="text" name="username" id="username" class="form-control"></td>
        </tr>

        <tr>
            <td>手机号</td>
            <td colspan="2"><input type="text" name="phone" id="phone" class="form-control"></td>
        </tr>
        <tr style="height: 20px;">
            <td colspan="3"><span id="s_phone"></span></td>
        </tr>
        <tr style="height: 20px;">
            <td colspan="3"><span id="s_check"></span></td>
        </tr>
        <tr>
            <td colspan="3">
                <button type="button" class="btn btn-primary  btn-block" id="sub">登录</button>
            </td>
        </tr>

    </table>
</form>
</body>
</html>